/** * 车险费率 */
<template>
  <Card style="height:800px">
    <header>
      <span>名称:</span>
      <Input v-model="name" style="width:200px" placeholder="请输入"></Input>
      <Button type="primary" @click="queryPage" style="margin-left: 10px;">查询</Button>
      <Button type="primary" @click="addItem();" style="margin-left: 10px;">新建</Button>
    </header>
    <Content style="margin-top:20px;">
      <Table border :columns="carFeeListCols" :data="carFeeListData"></Table>
    </Content>
    <div class="page-box">
      <Page :total="totalNumber" size="small" :current="currentPage" :page-size="pageSize" show-total @on-change="pageIndexChange"></Page>
    </div>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      $ajax: null,
      name: null,
      desc: '',
      path: this.$route.path,
      totalNumber: 0,
      currentPage: 1,
      pageSize: 10,
      carFeeListCols: [
        {
          title: 'ID',
          key: 'id',
          align: 'center',
          width: 100,
          type: 'index'
        },
        {
          title: '名称',
          align: 'center',
          key: 'name'
        },
        {
          title: '费率',
          align: 'center',
          key: 'percentage'
        },
        {
          title: '最小金额',
          align: 'center',
          key: 'minFee'
        },
        {
          title: '最大金额',
          align: 'center',
          key: 'maxFee'
        },
        {
          title: '状态',
          align: 'center',
          key: 'status',
          render: function (h, param) {
            const status = param.row.status
            switch (status) {
              case 0:
                return h('div', '使用中')
              case 1:
                return h('div', '拒绝')
              case 9:
                return h('div', '待审核')
              case 10:
                return h('div', '停用')
              default:
                return h('div', '')
            }
          }
        },
        {
          title: '开始使用时间',
          align: 'center',
          key: 'startDate'
        },
        {
          title: '操作',
          align: 'center',
          width: 300,
          render: function (h, param) {
            const vm = this
            return h('div', {}, [
              (param.row.status === 9 || param.row.status === 1) && h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '12px',
                  marginLeft: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '还款参数',

                      content: '通过?',

                      okText: '确定',

                      cancelText: '取消',
                      onOk: () => {
                        var params = {
                          feeId: param.row.feeId,
                          status: 0,
                          checkDesc: true
                        }
                        vm.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/carFeeParam/service/updateCarFeeStatus', params).then(re => {
                          var data = re.data
                          var code = data.code
                          if (code === 'success') {
                            param.row.status = 0
                          }
                        }).catch(er => {

                        })
                      }
                    })
                  }

                }
              }, '通过'),
              param.row.status === 9 && h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '12px',
                  marginLeft: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '还款参数',

                      content: '拒绝?',

                      okText: '确定',

                      cancelText: '取消',
                      onOk: () => {
                        var params = {
                          feeId: param.row.feeId,
                          status: 1,
                          checkDesc: true
                        }

                        vm.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/carFeeParam/service/updateCarFeeStatus', params).then(re => {
                          var data = re.data
                          var code = data.code
                          if (code === 'success') {
                            param.row.status = 1
                          }
                        }).catch(er => {

                        })
                      }
                    })
                  }

                }
              }, '拒绝'),
              param.row.status === 10 && h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '12px',
                  marginLeft: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '还款参数',
                      content: '使用?',
                      okText: '确定',
                      cancelText: '取消',
                      onOk: () => {
                        var params = {
                          feeId: param.row.feeId,
                          status: 0,
                          checkDesc: true
                        }
                        vm.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/paySequence/service/', params).then(re => {
                          var data = re.data
                          var code = data.code
                          if (code === 'success') {
                            param.row.status = 0
                          }
                        }).catch(er => {

                        })
                      }
                    })
                  }

                }
              }, '使用'),
              param.row.status === 0 && h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  fontSize: '12px',
                  marginLeft: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '还款参数',
                      content: '停用?',
                      okText: '确定',
                      cancelText: '取消',
                      onOk: () => {
                        var params = {
                          feeId: param.row.feeId,
                          status: 10,
                          checkDesc: true
                        }
                        vm.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/paySequence/service/', params).then(re => {
                          var data = re.data
                          var code = data.code
                          if (code === 'success') {
                            param.row.status = 10
                          }
                        }).catch(er => {

                        })
                      }
                    })
                  }
                }
              }, '停用'),
              // param.row.status === 9 && !vm.$route.meta.isFromCheck &&
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  fontSize: '12px',
                  marginLeft: '5px'
                },
                on: {
                  'click' () {
                    vm.$router.push({
                      path: vm.path + '/editor',
                      query: {
                        index: param.row.feeId,
                        type: 1
                      }
                    })
                  }
                }

              }, ' 编辑'),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    click: () => {
                      vm.$router.push({
                        path: vm.path + '/editor',
                        query: {
                          index: param.row.feeId,
                          type: 2
                        }
                      })
                    }
                  }
                },
                '查看'
              )
            ])
          }.bind(this)
        }
      ],
      carFeeListData: []
    }
  },

  methods: {
    addItem () {
      this.$router.push({
        name: 'car-fee-option-editor',
        query: {
          type: 0
        }
      })
    },
    pageIndexChange (pageIndex) {
      this.currentPage = pageIndex
      this.queryPage()
    },
    initPage () {
      this.queryPage()
    },
    queryPage () {
      let vm = this
      let params = {}
      params.name = vm.name
      params.pageSize = 10
      this.$ajax.post(this.$appContext.marvels_core_product + '/product/param/carFeeParam/service/carFeeList', params).then(re => {
        if (re.data.code === 'success') {
          vm.$Message.success('操作成功!')
          vm.carFeeListData = re.data.data.list
          vm.totalNumber = re.data.data.pages
        } else {
          vm.$Message.warning(re.data.message)
        }
      }).catch(er => {
        vm.$Message.error('操作失败')
      })
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.initPage()
  }
}
</script>

<style lang="less">
@import '../../../styles/common.less';
@import '../../../styles/table.less';
</style>
